<template>
  <view class="recruit-footer">
    <button class="recruit-footer__btn recruit-footer__btn--share">
      <text>分享</text>
    </button>
    <button class="recruit-footer__btn recruit-footer__btn--apply" @click="$emit('apply')">立即申请</button>
  </view>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['apply']);
</script>

<style lang="scss" scoped>
.recruit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 70px;
  background-color: #ffffff;
  padding: 0 20px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  
  &__btn {
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
    
    &--share {
      width: 110px;
      background-color: #f5f7fa;
      color: #555;
      margin-right: 20px;
      border: 1px solid #eee;
      
      &:active {
        background-color: #e8eaed;
        transform: scale(0.98);
      }
    }
    
    &--apply {
      flex: 1;
      background: linear-gradient(90deg, #1890ff, #36a6ff);
      color: #ffffff;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
      
      &:active {
        background: linear-gradient(90deg, #0c80f0, #1890ff);
        transform: translateY(2px);
        box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
      }
    }
  }
}
</style>
